<template>
  <view class="bookbox">
    <template v-if="options.length > 0">
      <view class="mgt20" v-for="(item, index) in options" :key="index" @click="$u.route({
        url: '/pages-details/forums/index',
        params: {
          mId: item.tmf_id,
          meetingId: item.tmf_meeting_id
        }
      })">
        <m-card :padding="false">
          <view class="book-item">
            <view class="flex align-center">
              <view class="c333 font32 fw500 text-ell">{{ item.tmf_name }}</view>
              <view class="mglauto tips font24" v-if="showTips"> 演讲 </view>
            </view>

            <template v-if="showTips">
              <view class="flex align-center cell mgt26">
                <image class="icon1" src="@/static/icon/detail-platform.png"></image>
                <view class="c333 font28 h1">{{ item.tmf_topic }}</view>
              </view>

              <view class="flex align-center cell mgt20">
                <image class="icon1" src="@/static/icon/detail-dot.png"></image>
                <view class="c333 font28 h1">{{ item.tmf_time_range }}</view>
              </view>
            </template>

            <template v-else>
              <view class="flex align-center cell mgt20">
                <image class="icon1" src="@/static/icon/detail-dot.png"></image>
                <view class="c333 font28 h1">{{ item.tmf_time_range }}</view>
              </view>

              
              <view class="flex align-center cell mgt26">
                <image class="icon2" src="@/static/icon/detail-map.png"></image>
                <view class="c333 font28 h1 text-ell ">{{ addressView(item) }}</view>
              </view>
            </template>
          </view>
        </m-card>
      </view>
    </template>
    <view class="mgt20" v-else>
      <m-card>
        <view style="padding: 40rpx 0;">
          <m-empty></m-empty>
        </view>
      </m-card>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => [],
    },

    showTips: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    addressView (item) {
      return (item.tmf_prov_name + item.tmf_city_name + item.tmf_region_name + item.tmf_address) || '暂无'
    }
  },
};
</script>

<style lang="scss" scoped>
.mgt26 {
  margin-top: 26rpx;
}
.bookbox {
  .book-item {
    padding: 32rpx 36rpx;

    .tips {
      border-radius: 30rpx;
      padding: 6rpx 22rpx;
      background-color: rgba(#ff8f1f, 0.12);
      color: #ff8f1f;
      flex-shrink: 0;
    }

    .cell {
      .icon1 {
        width: 32rpx;
        height: 32rpx;
      }

      .icon2 {
        width: 26rpx;
        height: 32rpx;
        flex-shrink: 0;
      }

      .h1 {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
